<template>
	<van-switch
		v-bind="$attrs"
		:class="[
			'app-editor-container',
			'app-mob-switch',
			`app-mob-switch-${name}`,
		]"
		v-model="curValue"
		:disabled="disabled"
		@click="handleClick"
		@change="change"
	>
	</van-switch>
</template>
<script lang="ts" setup>
import { IEvent } from '@/core';
import { switchProps } from './switch';
interface EditorEmit {
	(name: 'editor-event', value: IEvent<string>): void;
}
const props = defineProps(switchProps);
const emit = defineEmits<EditorEmit>();
const curValue = ref(false);

watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		curValue.value = newVal && newVal == '1' ? true : false;
	},
	{
		immediate: true,
	}
);
const handleClick = ($event: any) => {
	const tempValue = curValue.value ? '1' : '0';
	emit('editor-event', {
		name: `${props.name}`,
		action: 'editorClick',
		data: tempValue,
	});
};

const change = (value: any) => {
	const tempValue = value ? '1' : '0';
	emit('editor-event', {
		name: `${props.name}`,
		action: 'valueChange',
		data: tempValue,
	});
};
</script>
